<template>
	<view :class="[!loading && data.length === 0 ? emptyCls : '']">
		<view
			class="py-6-4 text-center"
			v-if="fail"
			@click="$emit('retry')"
			hover-class="opacity-80"
			hover-start-time="0"
			hover-stay-time="50"
		>
			<view class="mb-3-1">
				<b-icon :size="128" name="icon-xiaoxi-guzhangtongzhi" extraClass="color-secondary" />
			</view>
			<text class="text-m color-secondary"> 加载失败，点击重试 </text>
		</view>
		<view v-else-if="loading" class="" :style="skeletonStyle">
			<c-skeleton
				v-for="n in skeletonNum"
				:key="n"
				:extraClass="n === skeletonNum ? '' : 'mb-3-1'"
				:extraStyle="'height: ' + innerSkeletonHeight + 'px'"
			></c-skeleton>
		</view>
		<view v-else-if="data.length > 0" :class="extraClass">
			<slot />
			<uni-load-more
				v-if="loadMoreStatus"
				:status="loadMoreStatus"
				:contentText="{ contentdown: '上拉显示更多', contentrefresh: '正在加载...', contentnomore: '没有更多数据了' }"
				@clickLoadMore="$emit('clickLoadMore')"
			/>
		</view>
		<c-empty v-else :minHeight="emptyMinHeight" :message="emptyText" />
		<view v-if="extraHeight" :style="{ height: extraHeight + 'px' }"></view>
	</view>
</template>

<script>
import { ref } from 'vue';
export default {
	props: {
		loading: Boolean,
		skeletonNum: {
			default: 3,
			type: Number,
		},
		skeletonHeight: {
			default: 200,
			type: Number,
		},
		skeletonStyle: String,
		data: {
			type: Array,
			default() {
				return [];
			},
		},
		loadMoreStatus: String,
		fail: Boolean,
		extraClass: [String, Object, Array],
		emptyCls: {
			default: '',
			type: String,
		},
		emptyMinHeight: {
			default: 600,
			type: Number,
		},
		emptyText: String,
		extraHeight: Number,
	},
	setup(props) {
		const innerSkeletonHeight = ref(uni.upx2px(props.skeletonHeight));
		return {
			innerSkeletonHeight,
		};
	},
};
</script>

<style></style>
